<template>
	<view class="Tag" @click="handleClick" :style="{color: color}">
		<view class="tag-wrap">
			<text>{{ text }}</text>
			<slot></slot>
		</view>
	</view>
</template>

<script>
export default {
	name: 'Tag',
	props: {
		text: {
			type: String,
			default: ''
		},
		// 字体颜色
		color: {
			type: String,
			default: "#555"
		}
	},
	data() {
		return {};
	},
	methods: {
		handleClick() {
			this.$emit('click');
		}
	}
};
</script>

<style lang="scss">
.Tag {
	height: 64rpx;
	background-color: #f2f2f2;
	border-radius: 32rpx;
	text-align: center;
	line-height: 64rpx;
	font-size: 28rpx;
	color: #555;
	padding: 0 24rpx;
}
.tag-wrap {
	display: flex;
	align-items: center;
}
</style>
